<template>
    <!--  -->
    <div class="menu-container businessMenu">
        <el-row>
            <el-col :span="8">
                <div id="menu-content">
                    <div class="leftBtm">
                        <el-button
                            type="primary"
                            size="mini"
                            style="float:right;margin-right:20px;"
                            icon="el-icon-plus"
                            title="添加一级菜单"
                            @click="addMenuTop()"
                        >添加一级菜单</el-button>
                    </div>
                    <el-scrollbar
                        class="menu_scrollbar_wrap elTree_wrap"
                        wrap-class="side-bar-scrollbar-wrap"
                        view-class="side-bar-scrollbar-view"
                    >
                        <el-tree
                            :data="menuList"
                            node-key="id"
                            ref="tree"
                            highlight-current
                            @node-click="getInitData"
                            :check-on-click-node="true"
                            :expand-on-click-node="true"
                            :props="defaultPropsTree"
                            :accordion="true"
                            :default-expanded-keys="[1]"
                        >
                            <span slot-scope="{ node, data }">
                                <span class="el-tree-node__label" style="padding-left: 4px">
                                    <span
                                        :title="node.label"
                                    >{{ node.label }} --- 序号{{data.menuSort}}</span>
                                    <span class="menuIcon">
                                        <i
                                            class="el-icon-plus"
                                            title="添加菜单"
                                            @click="addMenu(node, data)"
                                        ></i>
                                        <i
                                            class="el-icon-edit"
                                            title="编辑菜单"
                                            @click="editMenu(node, data)"
                                        ></i>
                                        <i
                                            class="el-icon-delete"
                                            title="删除菜单"
                                            @click="deleteMenu(node, data)"
                                        ></i>
                                    </span>
                                </span>
                            </span>
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <div v-if="ruleTableflag" id="grid-content">
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap" class="noBack">
                    <div class="back_body">
                        <el-table
                            class="heard-bg validrule-tabel"
                            :data="tableData"
                            width="100%"
                            ref="multiple"
                            border
                        >
                            <el-table-column label="校验类型" width="180" prop="type"></el-table-column>
                            <el-table-column :label="labelValue">
                                <template slot-scope="scope">
                                    <el-tree
                                        v-if="scope.row.type === '禁止账户类别'"
                                        :data="scope.row.val"
                                        default-expand-all
                                        show-checkbox
                                        node-key="id"
                                        ref="VALIDRULE_ACCOUNT_TYPE"
                                        :expand-on-click-node="false"
                                        :check-on-click-node="true"
                                        :props="validrulePropsTree"
                                    />
                                    <div
                                        v-if="scope.row.type === '安全级别'"
                                        style="height: 60px; line-height: 60px"
                                    >
                                        <span
                                            v-if="scope.row.val.length <= 0"
                                            style="color: #909399"
                                        >暂无数据</span>
                                        <el-radio-group v-model="radioSAFETY">
                                            <el-radio
                                                v-for="item in scope.row.val"
                                                :label="item.id"
                                                :key="item.id"
                                            >{{ item.label }}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <el-tree
                                        v-if="scope.row.type === '禁止卡状态'"
                                        :data="scope.row.val"
                                        default-expand-all
                                        show-checkbox
                                        node-key="id"
                                        ref="VALIDRULE_CARD_STATUS"
                                        :expand-on-click-node="false"
                                        :check-on-click-node="true"
                                        :props="validrulePropsTree"
                                    />
                                    <el-tree
                                        v-if="scope.row.type === '其他验证'"
                                        :data="scope.row.val"
                                        default-expand-all
                                        show-checkbox
                                        node-key="id"
                                        ref="VALIDRULE"
                                        :expand-on-click-node="false"
                                        :check-on-click-node="true"
                                        :props="validrulePropsTree"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin:0 auto">
                            <el-button
                                type="primary"
                                size="small"
                                style="float: center; margin-top: 20px; margin-right: 16px"
                                @click="handlewherherOrbind"
                            >保存</el-button>
                        </div>
                        <br />
                        <h2 style="float: left;margin-bottom: 10px">话术配置：</h2>
                        <br />
                        <el-divider></el-divider>
                        <!-- 话术 -->
                        <div class="sptap">
                            <el-table
                                :data="spTableData"
                                width="100%"
                                stripe
                                border
                                class="heard-bg business_table"
                            >
                                <el-table-column label="排序" prop="sortNum" width="100px"></el-table-column>
                                <el-table-column label="内容" prop="content"></el-table-column>
                                <el-table-column label="操作" width="160px">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="primary"
                                            icon="el-icon-edit"
                                            circle
                                            @click="handleEdit(scope.row)"
                                        />
                                        <el-button
                                            type="danger"
                                            icon="el-icon-delete"
                                            circle
                                            @click="handleDelete(scope.row)"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="margin:0 auto">
                                <el-button
                                    type="primary"
                                    size="small"
                                    style="float: center; margin-top: 20px; margin-right: 16px"
                                    @click="handleAdd"
                                >新增话术</el-button>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <el-col v-else :span="16">
                <div class="bgimg">
                    <img src="@/assets/img/khindex/bj123.png" alt width="100%" />
                </div>
            </el-col>
        </el-row>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{ EditTitle }}</div>
            <el-form
                ref="form"
                class="menu-setting"
                size="small"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="上级菜单" v-if="flag">
                    <select-tree
                        v-model="form.parentSid"
                        :disabled="flag"
                        :options="menuList"
                        :props="defaultProps"
                        class="input_width"
                    ></select-tree>
                </el-form-item>

                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="form.menuName" class="input_width" />
                </el-form-item>

                <el-form-item label="菜单图标" v-if="form.parentSid === 0 ? true : false">
                    <el-input v-model="form.menuIcon" class="input_width" />
                </el-form-item>

                <el-form-item label="层级序号" prop="menuSort">
                    <el-input type="number" v-model="form.menuSort" class="input_width" />
                </el-form-item>

                <el-form-item label="是否可见" prop="isVisible">
                    <el-select v-model="form.isVisible" class="input_width" clearable>
                        <el-option label="不可见" value="0"></el-option>
                        <el-option label="可见" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="路由名称" prop="routerName">
                    <el-input v-model="form.routerName" class="input_width" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="spShow"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{ spEditTitle }}</div>
            <el-form
                :model="spEdit"
                class="menu-setting"
                label-position="right"
                ref="spEdit"
                label-width="110px"
                :rules="spFormRules"
                size="small"
            >
                <el-form-item label="排序" prop="sortNum">
                    <el-input-number
                        v-model="spEdit.sortNum"
                        :min="1"
                        class="addInput"
                        label="描述文字"
                        style="width: 120px"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="话术内容" prop="content">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="spEdit.content"
                        placeholder="请输入话术内容"
                        style="width: 90%"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="spShow = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="spSubmitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { mapState } from "vuex";
import SelectTree from "@/components/SelectTree/SelectTree.vue";
import { getDictFromBankNum, getDictSelectList } from "@/utils/Common";

export default {
    name: "businessMenu",
    computed: {
        // ...mapState({ VALIDRULE: state => state.common.VALIDRULE }) // 菜单校验菜单
    },
    data() {
        const validatemenuSort = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入序号"));
            } else {
                if (value.toString().length > 6) {
                    callback(new Error("字符最大长度为6"));
                }
                callback();
            }
        };
        return {
            labelValue: "客户视图 - 校验规则",
            menuList: [],
            selections: [],
            tableData: [],
            tableSAFETY: [],
            tableACCOUNT: [],
            tableSTATUS: [],
            Show: false,
            EditTitle: "添加菜单",
            flag: true,
            ruleTableflag: false,
            form: {
                category: "1",
                isUsable: "1",
                isVisible: "1",
                menuName: "",
                menuIcon: "",
                parentSid: "",
                menuSort: "",
                // menuLink: '',
                routerName: ""
            },
            radioSAFETY: "",
            rules: {
                category: [
                    { required: true, message: "请选择菜单类型", trigger: "change" }
                ],
                isUsable: [
                    { required: true, message: "请选择是否启用", trigger: "change" }
                ],
                isVisible: [
                    { required: true, message: "请选择是否可见", trigger: "change" }
                ],
                menuName: [
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { max: 30, message: "字符最大长度为30", trigger: "blur" }
                ],
                parentSid: [
                    { required: true, message: "请输入菜单所属父id", trigger: "change" }
                ],
                menuSort: [
                    {
                        required: true,
                        message: "菜单排序id只能输入数字",
                        trigger: "blur"
                    },
                    { validator: validatemenuSort, trigger: "blur" }
                ],
                // menuLink: [
                //   { required: true, message: '请输入菜单路径', trigger: 'blur' },
                // ],
                routerName: [
                    { required: true, message: "请输入路由名称", trigger: "blur" },
                    { max: 50, message: "字符最大长度为50", trigger: "blur" }
                ]
            },
            defaultPropsTree: {
                label: "menuName",
                children: "child"
            },
            validrulePropsTree: {
                label: "label"
            },
            defaultProps: {
                parent: "pid",
                value: "id",
                label: "menuName",
                children: "child"
            },
            rowObj: {},
            tableSAFETY: [],
            // 话术表格内容
            spTableData: [],
            spShow: false, //话术新增/修改框显示
            spEditTitle: "添加话术",
            spFormRules: {
                sortNum: [
                    { required: true, message: '请输入排序值', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入话术内容', trigger: 'blur' },
                ],
            },
            // 新增/修改话术字段
            spEdit: {
                sortNum: '',
                content: '',
                menuId: '',
            },
            // 判断新增还是编辑
            spIsAddOrUpdate: Boolean,
        };
    },
    created() {
        this.getMenuInfo();
        this.getValidruleDate();
    },
    methods: {
        // 添加一级菜单
        addMenuTop() {
            this.Show = true;
            this.EditTitle = "添加一级菜单";
            this.form = {};
            this.form.isUsable = "1";
            this.form.isVisible = "1";
            this.form.parentSid = 0;
            this.flag = false;
            // 解决一进来就进行表单验证问题
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        // 获取当前点击项的验证规则
        getDictDetailIdsByMenuId() {
            this.$post.busiMenu
                .busiMenuRules({ menuId: this.rowObj.id })
                .then(res => {
                    // console.log(res.data.content);
                    if (res.data.success) {
                        const activeID = res.data.content;
                        // console.log(activeID);
                        // 从返回的数组从，单独判断安全级别单选框的值是否存在
                        // console.log(this.tableSAFETY,'this.tableSAFETY');
                        this.$nextTick(() => {
                            let activeSAFETYID;
                            activeID.forEach(item => {
                                this.tableSAFETY.forEach(tableId => {
                                    if (tableId.id === item) {
                                        activeSAFETYID = item;
                                        return false;
                                    }
                                });
                            });
                            // console.log(activeSAFETYID);
                            // 将激活的值赋值给安全级别
                            this.radioSAFETY = activeSAFETYID;
                            this.$refs.VALIDRULE.setCheckedKeys(activeID);
                            this.$refs.VALIDRULE_CARD_STATUS.setCheckedKeys(activeID);
                            this.$refs.VALIDRULE_ACCOUNT_TYPE.setCheckedKeys(activeID);
                        });
                    }
                });
        },
        handleSelectChange(val) {
            const arr = [];
            val.forEach(item => {
                arr.push(item.id);
            });
            this.selections = arr;
        },
        // tree 树的 渲染方法
        renderContent(h, { node, data, store }) {
            retrun(

            )
        },
        // 获取规则列表在mounted钩子函数获取并建立好数据
        async getValidruleDate() {
            console.log("进来了");
            const tableData = await getDictSelectList("VALIDRULE", this);
            // 将安全级别单独存到data中，方便判断获取到的id是否存在
            this.tableSAFETY = await getDictFromBankNum("VALIDRULE_SAFETY", this);
            const tableACCOUNT =
                (await getDictFromBankNum("VALIDRULE_ACCOUNT_TYPE", this)) || [];

            console.log(tableACCOUNT, "tableACCOUNT进来了");
            const tableSTATUS = await getDictFromBankNum(
                "VALIDRULE_CARD_STATUS",
                this
            );
            this.tableData = [
                { type: "禁止账户类别", val: tableACCOUNT },
                { type: "安全级别", val: this.tableSAFETY },
                { type: "禁止卡状态", val: tableSTATUS },
                { type: "其他验证", val: tableData }
            ];

            // console.log(this.tableData,'进来了');
            // this.tableData = this.VALIDRULE;
            // console.log(this.tableData);
        },

        // 当前点击菜单是否展示当前规则校验
        getInitData(row) {
            this.rowObj = row;
            console.log(row.menuName);
            this.labelValue = `${row.menuName}  - 校验规则`;

            this.ruleTableflag = true;
            console.log('this.ruleTableflag', this.ruleTableflag);
            this.$nextTick(() => {
                this.getDictDetailIdsByMenuId();
                this.loadSpeechList();
            });
        },
        // 用户点击b保存按钮，保存当前校验
        handlewherherOrbind() {
            const VALIDRULE_SAFETY = this.radioSAFETY;
            const VALIDRULE = this.$refs.VALIDRULE.getCheckedKeys();
            const VALIDRULE_CARD_STATUS = this.$refs.VALIDRULE_CARD_STATUS.getCheckedKeys();
            const VALIDRULE_ACCOUNT_TYPE = this.$refs.VALIDRULE_ACCOUNT_TYPE.getCheckedKeys();
            this.selections = [
                ...VALIDRULE,
                VALIDRULE_SAFETY,
                ...VALIDRULE_CARD_STATUS,
                ...VALIDRULE_ACCOUNT_TYPE
            ];
            // console.log(this.selections);
            const params = {
                id: this.rowObj.id,
                ids: this.selections
            };
            this.$post.busiMenu.menuRule(params).then(res => {
                if (res.data.success) {
                    this.$message.success("操作成功！");
                } else {
                    this.$message.error("操作失败！");
                }
            });
        },
        addMenu(node, data) {
            this.EditTitle = "添加菜单";
            console.log('node__业务菜单', node);
            console.log('data————业务菜单', data);
            this.form = {};
            this.form.isUsable = "1";
            this.form.isVisible = "1";
            this.form.parentSid = data.id;
            this.form.category = '2';
            this.flag = true;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        editMenu(node, data) {
            this.EditTitle = "编辑菜单";
            this.form = JSON.parse(JSON.stringify(data));
            this.flag = true;
            if (data.parentSid === 0) {
                // 编辑一级菜单时，上级菜单也不展示
                this.flag = false;
            }
            this.Show = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        deleteMenu(node, data) {
            this.$confirm("确认删除该菜单及其下的子菜单？", "提示", {
                customClass: "warning"
            })
                .then(() => {
                    this.$post.busiMenu.deleteMenu({ id: data.id }).then(
                        res => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                            } else {
                                this.$message.error(err.msg);
                            }
                        },
                        err => {
                            this.$message.error(err.msg);
                        }
                    );
                })
                .catch(() => { });
        },
        getMenuInfo() {
            let type = null;
            if (this.$route.path === "/manage/menusetting") {
                type = "1";
            } else {
                type = "2";
            }
            const param = { category: type };
            this.$post.busiMenu.busiMenuTreeList(param).then(
                res => {
                    this.menuList = res.data.content;
                },
                err => {
                    this.$message.error(err);
                }
            );
        },
        submitEdit() {
            if (this.form.id) {
                // 编辑
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.$post.busiMenu.updateMenu(this.form).then(
                            res => {
                                if (res.data.success) {
                                    this.getMenuInfo();
                                    this.Show = false;
                                    this.$message.success(res.data.content);
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            },
                            err => {
                                this.$message.error(err.message);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                // 添加
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.$post.busiMenu.addMenu(this.form).then(res => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                                this.Show = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
        //加载话术
        loadSpeechList() {
            var speechQueryParam = {
                'menuId': this.rowObj.id, //菜单Id
            };
            this.$post.busiMenu.speechCraftListByMenuId(speechQueryParam).then((res) => {
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.spTableData = res.data.content;

                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '请求异常:', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
        // 话术-添加
        handleAdd() {
            this.spEditTitle = '添加话术';
            this.spEdit = {};
            this.spShow = true;
            this.spIsAddOrUpdate = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.spEdit) {
                this.$refs.spEdit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 话术-修改
        handleEdit(row) {
            this.spEditTitle = '修改话术';
            this.spEdit = JSON.parse(JSON.stringify(row));
            this.spShow = true;
            this.spIsAddOrUpdate = false;
            if (this.$refs.spEdit) {
                this.$refs.spEdit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 话术-删除
        handleDelete(row) {
            this.$confirm('确认删除该话术？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    let spdelete = {
                        id: row.id,
                        menuId: this.rowObj.id,
                        content: row.content
                    };
                    this.$post.busiMenu.speechCraftDelete(spdelete)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                this.loadSpeechList();
                            } else {
                                this.$message.error('删除失败！');
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增/编辑话术-点击确定按钮
        spSubmitEdit() {
            if (this.spIsAddOrUpdate == false) {
                // 编辑
                this.$refs.spEdit.validate((valid) => {
                    if (valid) {
                        this.$post.busiMenu.speechCraftUpdate(this.spEdit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.loadSpeechList();
                                    this.spShow = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 新增
                this.$refs.spEdit.validate((valid) => {
                    if (valid) {
                        this.spEdit.menuId = this.rowObj.id, //菜单Id
                            this.$post.busiMenu.speechCraftAdd(this.spEdit)
                                .then((res) => {
                                    if (res.data.success) {
                                        this.$message.success('添加成功！');
                                        this.loadSpeechList();
                                        this.spShow = false;
                                    } else {
                                        this.$message.error(res.data.msg);
                                    }
                                });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },

    },
    components: {
        SelectTree
    }
};
</script>
<style lang='scss' scoped>
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
}

/deep/ .app-main-container .app-main .menu-container .el-scrollbar,
.app-main-container .app-main .menu-container .el-tree {
    background: transparent !important;
    height: 100%;
}

.menu-container {
    .leftBtm {
        float: right;
        margin-right: 20px;
        margin-bottom: 5px;
    }
    .bgimg {
        margin-left: 20px;
        margin-top: 0px;
        width: auto;
        img {
            border-radius: 5px;
        }
    }
}
.validrule-tabel {
    .el-tree {
        display: flex;
        flex-wrap: wrap;
        .el-tree-node {
            flex-basis: 200px;
            // background: red;
        }
    }
}
</style>

<style lang='scss'>
.input_width {
    min-width: 200px;
    display: inline-block;
}
.businessMenu {
    > .el-row {
        height: 100% !important;
    }
}
.el-dialog .el-dialog__body .el-form-item .el-form-item__content {
    > .addInput .el-input input {
        width: 100%;
        min-width: 100%;
    }
}
.menu-container {
    .el-tree {
        max-height: 79vh;
    }

    #grid-content {
        width: 65%;
        max-height: 83vh;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 5px 10px;
        overflow: hidden;
        overflow-y: auto;
        margin-left: 20px;
        display: inline-block;
    }
}
/* #menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
    height: 100%;
} */
#menu-content {
    padding: 5px;
    .menu_scrollbar_wrap {
        height: calc(100% - 40px);
        width: 100%;
        .el-scrollbar__wrap {
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
.menu-container,
.el-col-8,
.bg-purple-dark,
.app-main-container .app-main {
    // background: #fff;
    .menu-container {
        background: #fff;
        padding: 20px;
        .el-scrollbar,
        .el-tree {
            height: 100%;
        }
    }
    .bg-purple-dark > div {
        height: 100%;
    }
    .el-tree-node__content:hover {
        background-color: #ecf5ff !important;
    }
}
#menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
}
.menu-container,
.el-col-8,
.bg-purple-dark,
.bg-purple-dark > div {
    height: 100%;
}
.el-tree-node__content:hover {
    background-color: #ecf5ff !important;
}

.noBack {
    background: transparent !important;
}
.menuIcon {
    position: absolute;
    right: 6%;
    display: none;
    background: #f5f7fa;
    i {
        color: #409eff;
        font-size: 16px;
    }
    .el-icon-edit {
        margin: 0 4px;
    }
}
.el-tree-node__content:hover .menuIcon {
    display: inline-block;
}
</style>
